<template>
    <!-- 车牌组件 -->
    <view class="plate-content">
        <view class="plate-popup" v-show="plateShow">
            <!-- 关闭 -->
            <!-- <view class="plate-close" v-show="plateNumber.length===8 || plateNumber.length===7" @click="close">关闭</view> -->
            <view class="plate-close" @click="close"><text>关闭</text></view>
            

            <view>
                <view class="plate-popup-item">
                    <!-- 数字选择 -->
                    <view class="plate-popup-item-list" :class="!isInputZh?'cur':''" v-for="(item,itemIndex) in keyNumber" :key="itemIndex" @click="plateNum(item)">{{item}}</view>

                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" :class="isInputZh?'cur':''" v-for="(item,itemIndex) in keyEnInput1" :key="itemIndex" @click="plateInput(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" :class="isInputZh?'cur':''" v-for="(item,itemIndex) in keyEnInput2" :key="itemIndex" @click="plateInput(item)">{{item}}</view>
                </view>
                <view class="plate-popup-item">
                    <view class="plate-popup-item-list" :class="isInputZh?'cur':''" v-for="(item,itemIndex) in keyEnInput3" :key="itemIndex" @click="plateInput(item)">{{item}}</view>
                    <!-- 删除 -->
                    <view class="plate-popup-item-list del" @click="plateDel">
                        <image :src="src" />
                    </view>
                </view>
            </view>

        </view>
        <!-- <button class="btn" type="button" @click="show" data-position="bottom">底部弹出 popup</button> -->

    </view>
</template>

<script>
	import plateDel from './plate-del.png'
    export default {
        props: {
            //输入的车牌
            plateNumber: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                plateShow: false, //车牌选择是否打开
                keyNumber: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				keyEnInput1: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
				keyEnInput2: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
				keyEnInput3: ["Z", "X", "C", "V", "B", "N", "M"],
                isInputZh: false, //是否输入了特殊字符
                src: ''
            };
        },
        mounted() {
            this.src = plateDel;
        },
        onShow() {
			
		},
        methods: {
            /**
             * @desc 初始化
             */
            init() {
                this.plateNumber = '';
            },
            /**
             * @desc 打开下拉栏
             */
            show() {
                this.plateShow = true;
				//传值到父组件
				this.$emit('showOrHide', true);
            },
            /**
             * @desc 关闭弹出的车牌
             */
            close() {
                this.plateShow = false;
				//传值到父组件
				this.$emit('showOrHide', false);
            },
            /**
             * @desc 字母选择
             */
            plateInput(plate) {
            	if(this.plateNumber.length < 2){
            		this.isInputZh = false
            	}else{
            		this.isInputZh = true
            	}
            	if (this.plateNumber.length < 3) {
                    this.plateNumber = this.plateNumber + plate;
                    //与父组件双向绑定，传值到父组件
                    this.$emit('input', this.plateNumber);
                }
            },
            /**
             * @desc 数字选择
             */
            plateNum(plate) {
                //判断是否输入了字母
                if (this.plateNumber.length >= 3 && this.plateNumber.length < 7) {
                    this.plateNumber = this.plateNumber + plate;
                    //与父组件双向绑定，传值到父组件
                    this.$emit('input', this.plateNumber);
                }
            },
            /**
             * @desc 删除
             */
            plateDel() {
				if(this.plateNumber.length === 3){
					this.isInputZh = false;
				}
                if (this.plateNumber) {
                    this.plateNumber = this.plateNumber.substring(0, this.plateNumber.length - 1);
                }
                //与父组件双向绑定，传值到父组件
                this.$emit('input', this.plateNumber);
            }
        }
    }
</script>

<style lang="scss">
    @import "./plateNumber.scss";
</style>
